<template>
  <div class="marketUser">
    <div class="table-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>卖场管理</el-breadcrumb-item>
        <el-breadcrumb-item>卖场管理员</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div style="margin: 30px 0 10px; padding: 20px; background: #fff">
      <el-button
        type="primary"
        size="medium"
        style="margin-right: 20px"
        @click="addMarketUser"
        >新增管理员</el-button
      >
      卖场：
      <el-select
        v-model="marketId"
        clearable
        @change="selectMarket"
        filterable
        placeholder="请选择卖场"
      >
        <el-option
          v-for="item in marketList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>
    <div style="padding: 20px; background: #fff">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="ID" width="180" align="center">
        </el-table-column>
        <el-table-column
          prop="pid"
          label="角色"
          width="auto"
          align="center"
        >
        <template slot-scope="scope">
          <div>{{scope.row.pid==0?'管理员':'操作员'}}</div>
        </template>
        </el-table-column>
        <el-table-column
          prop="nickname"
          label="昵称"
          width="auto"
          align="center"
        ></el-table-column>
        <el-table-column prop="headimg" label="头像" align="center">
          <template slot-scope="scope">
            <el-image
              style="width: 60px; height: 60px"
              :src="scope.row.headimg"
              :preview-src-list="[scope.row.headimg]"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="mobile"
          align="center"
          label="手机号"
          width="auto"
        ></el-table-column>
        <el-table-column
          prop="status"
          align="center"
          label="状态"
          width="auto"
        >
          <template slot-scope="scope">
            <div>{{scope.row.status==1?'启用':'禁用'}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="mobile" align="center" label="操作" width="auto">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="editUser(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="delUser(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 添加卖场管理员对话框 -->
    <el-dialog
      title="新增管理员"
      :visible.sync="dialogVisible"
      width="45%"
      @close="closeFn"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item v-if="!form.choose_id" label="选择卖场" prop="market_id">
          <el-select
            v-model="form.market_id"
            clearable
            filterable
            placeholder="请选择卖场"
          >
            <el-option
              v-for="item in marketList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input
            v-model="form.nickname"
            placeholder="请输入管理员昵称"
          ></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
            action="/api/client/base/uploadfile"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            ref="upload"
            :on-remove="handleRemove"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :auto-upload="true"
            :limit="1"
            :headers="myHeaders"
            :file-list="fileList"
            accept="image/jpeg, image/jpg, image/gif, image/png"
            :multiple="false"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisibleImg">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item v-if="!form.choose_id" label="账号" prop="username">
          <el-input
            v-model="form.username"
            placeholder="请输入管理员账号"
          ></el-input>
        </el-form-item>
        <el-form-item v-if="!form.choose_id" label="手机号" prop="mobile">
          <el-input
            v-model="form.mobile"
            placeholder="请输入管理员账手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="form.password"
            placeholder="请输入管理员密码"
          ></el-input>
        </el-form-item>
        <el-form-item v-if="form.choose_id" label="状态">
          <el-radio v-model="form.status" label="1">启用</el-radio>
          <el-radio v-model="form.status" label="0">禁用</el-radio>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      page: 1,
      pagesize: 10,
      total: 0,
      marketId: 1, //卖场id
      marketList: [],
      tableData: [],
      dialogVisible: false,
      form: {
        pid: 0,
        market_id: "",
        nickname: "",
        headimg: "",
        username: "",
        mobile: "",
        password: "",
      },
      
      validate:false,
      rules: {
        market_id: [{ required: true, message: "请选择卖场", trigger: "blur" }],
        nickname: [
          { required: true, message: "请输入管理员昵称", trigger: "blur" },
        ],
        username: [
          { required: true, message: "请输入管理员账号", trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入管理员手机", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入管理员密码", trigger: "blur" },
        ],
      },

      fileList: [],
      dialogImageUrl: "",
      dialogVisibleImg: false,
      myHeaders: {
        "access-token": this.$store.state.token, //这里重新定义了请求头
        Authorization: this.$store.state.token,
        "user-id": this.$store.state.user_id,
      },
    };
  },
  mounted() {
    this.getMarketUser();
    this.remoteMethod();
  },
  methods: {
    // 获取卖场列表
    remoteMethod() {
      this.$http.post("/api/root/Market/marketList").then((res) => {
        if (res.code == 1) {
          this.marketList = res.data ? res.data : [];
        }
      });
    },
    // 选择卖场
    selectMarket() {
      this.page = 1;
      this.pagesize = 10;
      this.getMarketUser();
    },
    // 获取卖场管理员列表
    getMarketUser() {
      let params = {
        market_id: this.marketId,
        page: this.page,
        pagesize: this.pagesize,
      };
      this.$http.post("/api/root/Market/marketUserList", params).then((res) => {
        if (res.code == 1) {
          this.tableData = res.data.list ? res.data.list : [];
          this.total = res.data.count;
        }
      });
    },
    // 新增卖场管理员按钮
    addMarketUser() {
      this.dialogVisible = true;
    },

    // 对话框确定
    submitBtn(){
      let that = this
      that.$refs['form'].validate((valid) => {
        if (!valid) {
          that.$message.warning('表单数据未填写完整,操作失败！')
          return false;
        }else{
          that.addMarketUserFn()
        }
      });
    },
    // 添加卖场管理员账号
    addMarketUserFn(){
      let imgArr = []
      this.fileList.map(item=>{
        console.log(item);
        if(item.response){
          imgArr.push(item.response.data.id)
        }else{
          imgArr.push(item.id)
        }
      })
      this.form.headimg = imgArr.join(',')
      console.log(this.form,'编辑数据数据');
      let url = this.form.choose_id?'/api/root/Market/marketUserEdit':'/api/root/Market/marketUserAdd';
      this.$http.post(url,this.form).then(res=>{
        console.log(res,'添加结果');
        if(res.code==1){
          this.$message.success(this.form.choose_id?'修改成功':'添加成功')
          this.dialogVisible = false
          this.getMarketUser()
        }else{
          this.$message.warning(res.msg)
        }
      })
    },
    // 关闭对话框
    closeFn(){
      this.fileList = []
      this.form = {
        pid: 0,
        market_id: "",
        nickname: "",
        headimg: "",
        username: "",
        mobile: "",
        password: "",
      }
      // 清除触发了的表单验证
      this.$refs['form'].clearValidate()
    },

    // 编辑管理员
    editUser(row){
      console.log(row,'管理员信息');
      this.dialogVisible = true;
      this.form = {
        nickname:row.nickname,
        choose_id:row.id,
        status:row.status.toString(),
        password:row.password,
        headimg:''
      }
      this.fileList.push({
        url:row.headimg,
        id:row.headimg_id
      })
    },

    // 删除管理员
    delUser(row){
      this.$confirm("确定删除该管理员吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(()=>{
        let params = {
          choose_id:row.id
        }
        this.$http.post('/api/root/Market/marketUserDel',params).then(res=>{
          if(res.code==1){
            this.$message.success('删除成功')
            this.getMarketUser()
          }else{
            this.$message.warning(res.msg)
          }
        })
      })
    },

    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    handlePictureCardPreview(file) {
      console.log("file", file);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleAvatarSuccess(res, file, fileList) {
      console.log("fileList", fileList);
      this.fileList = fileList;
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message.error("上传活动图片大小不能超过 10MB!");
      }
      return isLt2M;
    },
  },
};
</script>
<style scoped lang="less">
.marketUser {
  height: 100%;
  background-color: #f5f5f5;
  .table-breadcrumb {
    height: 6%;
    min-height: 40px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 10px;
  }
}
</style>